<!doctype html>
<html dir="$i18n{textdirection}" lang="$i18n{language}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>$i18n{title}</title>

<link rel="stylesheet" href="chrome://policy/policy.css">
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">

</head>

<body>
  <header>
    <div class="header-row">
      <h1>$i18n{title}</h1>
      <input id="filter" class="search-field-container" type="search"
          placeholder="$i18n{filterPlaceholder}"
          aria-label="$i18n{filterPlaceholder}" incremental>
    </div>
    <div class="header-row">
      <button id="reload-policies">$i18n{reloadPolicies}</button>
      <button id="export-policies">$i18n{exportPoliciesJSON}</button>
      <button id="copy-policies">$i18n{copyPoliciesJSON}</button>
      <div id="show-unset-container" class="show-unset-checkbox">
        <label>
          <input id="show-unset" type="checkbox">
          <span>$i18n{showUnset}</span>
        </label>
      </div>
    </div>
    <div aria-live="polite" id="screen-reader-message"></div>
  </header>
  <main id="policy-ui">
    <section id="status-section" class="status-box-section" hidden>
      <h3>$i18n{status}</h3>
      <div id="status-box-container"></div>
    </section>
    <section id="main-section" class="empty">
      <!--  This is where policy tables get dynamically added. -->
    </section>
  </main>
  <div hidden>
    <fieldset id="status-box-template">
      <legend class="legend"></legend>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelVersion}</div>
        <div class="version"></div>
      </div>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelMachineEnrollmentMachineName}</div>
        <div class="machine-enrollment-name"></div>
      </div>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelMachineEnrollmentDomain}</div>
        <div class="machine-enrollment-domain"></div>
      </div>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelMachineEnrollmentToken}</div>
        <div class="machine-enrollment-token"></div>
      </div>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelMachineEntrollmentDeviceId}</div>
        <div class="machine-enrollment-device-id"></div>
      </div>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelUsername}</div>
        <div class="username"></div>
      </div>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelManagedBy}</div>
        <div class="managed-by"></div>
      </div>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelGaiaId}</div>
        <div class="gaia-id"></div>
      </div>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelClientId}</div>
        <div class="client-id"></div>
      </div>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelAssetId}</div>
        <div class="asset-id"></div>
      </div>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelLocation}</div>
        <div class="location"></div>
      </div>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelDirectoryApiId}</div>
        <div class="directory-api-id"></div>
      </div>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelTimeSinceLastRefresh}</div>
        <div class="time-since-last-refresh"></div>
      </div>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelRefreshInterval}</div>
        <div class="refresh-interval"></div>
      </div>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelPoliciesPush}</div>
        <div class="policy-push"></div>
      </div>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelStatus}</div>
        <div class="status"></div>
      </div>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelIsAffiliated}</div>
        <div class="is-affiliated"></div>
      </div>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelIsOffHoursActive}</div>
        <div class="is-offhours-active"></div>
      </div>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelVersion}</div>
        <div class="version"></div>
      </div>
      <div class="status-entry" hidden>
        <div class="label">$i18n{labelLastCloudReportSentTimestamp}</div>
        <div class="last-cloud-report-sent-timestamp"></div>
      </div>
    </fieldset>

    <div class="policy-table" id="policy-table-template" role="table"
         aria-labelledby="policy-header">
      <h3 class="header" id="policy-header"></h3>
      <p class="id"></p>
      <div class="main">
        <div class="header row" role="row">
          <div class="name" role="columnheader">$i18n{headerName}</div>
          <div class="value" role="columnheader">$i18n{headerValue}</div>
          <div class="source" role="columnheader">$i18n{headerSource}</div>
          <div class="scope" role="columnheader">$i18n{headerScope}</div>
          <div class="level" role="columnheader">$i18n{headerLevel}</div>
          <div class="messages" role="columnheader">$i18n{headerStatus}</div>
          <div class="toggle" role="columnheader"></div>
        </div>
        <div class="no-policy">$i18n{noPoliciesSet}</div>
      </div>
    </div>

    <div class="policy-conflict-data" id="policy-conflict-template"
         role="rowgroup" hidden>
      <div class="policy conflict row" role="row">
          <div class="name" role="rowheader">$i18n{conflictValue}</div>
          <div class="value" role="cell"></div>
          <div class="source" role="cell"></div>
          <div class="scope" role="cell"></div>
          <div class="level" role="cell"></div>
          <div class="messages" role="cell"></div>
          <div class="toggle" role="cell"></div>
      </div>
      <div class="value row" role="row">
        <div class="name" role="rowheader"></div>
        <div class="value" role="cell"></div>
      </div>
    </div>

    <div class="policy-data" id="policy-template" role="rowgroup">
      <div class="policy row" role="row">
        <div class="name" role="rowheader" aria-labelledby="name">
          <a class="link" target="_blank">
            <span id="name"></span>
            <img src="chrome://resources/images/open_in_new.svg">
          </a>
        </div>
        <div class="value" role="cell"></div>
        <div class="source" role="cell"></div>
        <div class="scope" role="cell"></div>
        <div class="level" role="cell"></div>
        <div class="messages" role="cell"></div>
        <div class="toggle" role="cell">
          <a is="action-link" class="show-more">$i18n{showMore}</a>
          <a is="action-link" class="show-less" hidden>$i18n{showLess}</a>
        </div>
      </div>
      <div class="value row" role="row" hidden>
        <div class="name" role="rowheader">$i18n{value}</div>
        <div class="value" role="cell"></div>
        <div class="copy" role="cell">
          <a is="action-link" class="copy-value link" role="cell">
            <img src="chrome://resources/images/icon_copy_content.svg">
          </a>
        </div>
      </div>
      <div class="errors row" role="row" hidden>
        <div class="name" role="rowheader">$i18n{error}</div>
        <div class="value" role="cell"></div>
      </div>
      <div class="warnings row" role="row" hidden>
        <div class="name" role="rowheader">$i18n{warning}</div>
        <div class="value" role="cell"></div>
      </div>
      <div class="infos row" role="row" hidden>
        <div class="name" role="rowheader">$i18n{info}</div>
        <div class="value" role="cell"></div>
      </div>
    </div>

    <div class="policy-precedence-data" id="policy-precedence-template"
         role="rowgroup">
      <div class="precedence row" role="row">
          <div class="name" role="rowheader">$i18n{labelPrecedence}</div>
          <div class="value" role="cell"></div>
      </div>
    </div>
  </div>
</body>

<script type="module" src="policy.js"></script>
</html>
